@import './antd/index.less';
@import './animation.less';
.css3dObject {
  display: block;
  // box-shadow: 0 0 10px #fff;
  cursor: grab;
  // pointer-events: none !important;
  .css3dObject-pointRight {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 1;
    display: none;
    width: 6px;
    height: 6px;
    background-color: white;
    border: 1px solid #1890ff;
    cursor: nwse-resize; /* 对角线调整大小指针 */
  }
  .text-box {
    position: absolute;
    left: 50%;
    display: inline-block;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
  }
  .data-box {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    transform: translateX(-50%) translateY(-50%);
  }
  .top {
    top: 0;
    bottom: auto;
    transform: translateX(-50%) translateY(-100%);
  }

  .bottom {
    top: auto;
    bottom: 0;
    transform: translateX(-50%) translateY(100%);
  }

  .left {
    top: 50%;
    left: 0;
    transform: translateX(calc(-100% - 4px)) translateY(-50%);
  }

  .right {
    top: 50%;
    right: 0;
    transform: translateX(calc(100% + 4px)) translateY(-50%);
  }

  .center {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .css3dObject-imgbox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .frame-animation {
      z-index: 999;
      height: auto !important;
      animation: play 1s infinite steps(25);
    }
  }

  .iframe-box {
    display: none;
    float: left;
    width: 100%;
    height: 100%;
    border: none;
    transform: translateY(-100%);
  }
  .video-box {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    float: left;
    width: 100%;
    height: 100%;
    border: none;
  }
  .cover-box {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    display: none;
    float: left;
    float: left;
    width: 100%;
    height: 100%;
    border: none;
  }
}
.css3dObject-hover {
  &:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
}
.css3dObject-selected {
  border: 1px dashed yellow;
  .css3dObject-pointRight {
    display: block;
  }
}
@keyframes play {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
